<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-10-03 21:53:51
 * @LastEditors: yuxi
 * @LastEditTime: 2022-10-04 21:35:58
-->
<template>
  <div class="mining-overlay" ref="popup" :class="customClass"> 
    <div class="title">
      <slot name="title">
        {{title}}
      </slot>
    </div>
    <div ref="content" class="content">
      <slot name="content">
        <div v-html="content"></div>
      </slot>
    </div>
    <div v-if="closeable" class="close" @click="hide">×</div>
  </div>
</template>

<script>
import commonMixin from '../mixins/base.js'
import Overlay from 'ol/Overlay';

export default {
  name: 'MiningOverlay',
  mixins: [commonMixin('control')],
  props: {
    // 标题
    title: {
      type: String,
      default () {
        return ''
      }
    },
    // 正文
    content: {
      type: String,
      default () {
        return ''
      }
    },
    // 是否可关闭
    closeable: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 位置
    position: {
      type: Array,
      default () {
        return null
      }
    },
    // 偏移量
    offset: {
      type: Array,
      default () {
        return [0, 0]
      }
    },
    // 自定义样式
    customClass: {
      type: [String, Object],
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      overlay: null
    }
  },
  watch: {
    position () {
      this.setPosition()
    },
    offset () {
      this.setOffset()
    }
  },
  methods: {
    load () { 
      const { map } = this
      const container = this.$refs.popup;
      this.overlay = new Overlay({
        element: container,
        autoPan: {
          animation: {
            duration: 250,
          },
        },
        offset: [
        -this.$refs.popup.clientWidth / 2 + this.offset[0],
        -this.$refs.popup.clientHeight - 11 + this.offset[1]
        ]
      }); 
      if (this.position) {
        this.setPosition();
      } 
      map.addOverlay(this.overlay)
    },
    setPosition () {
      this.overlay.setPosition(this.position);
    },
    setOffset () {
      console.log( this.$refs)
      console.log('setOffset',  this.$refs.popup.clientWidth )
      this.overlay.setOffset([
        -this.$refs.popup.clientWidth / 2 + this.offset[0],
        -this.$refs.popup.clientHeight - 11 + this.offset[1]
      ])
    },
    hide (){
      this.overlay.setPosition(undefined);
    },
    show (){
      this.setPosition()
    }
  }
}
</script>

<style lang="less" scoped>
.mining-overlay {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  padding: 5px;

  &:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;

    border-top-color: #cccccc;
    border-width: 11px;
    left: 105px;
    margin-left: -11px;
  }

  &::after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;

    border-top-color: white;
    border-width: 10px;
    left: 105px;
    margin-left: -10px;
  }

  & .title {
    margin: 0 -5px;
    border-bottom: 1px solid #dcdfe6;
    padding: 0px 20px 5px 5px;
    color: #666;
    font-size: 12px;
    box-sizing: border-box;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  & .content {
    margin: 0 -5px;
    padding: 5px;
    color: #999;
    font-size: 12px;
  }

  & .close {
    position: absolute;
    right: 5px;
    top: 0px;
    font-size: 22px;
    color: #dcdfe6;
    cursor: pointer;
  }
}
</style>